<template>
  <view class="phonogram_hand" :class="isPlay? '' : 'dial'">
    <view class="ball"></view>
    <image src="@/static/image/needle.png" mode="widthFix"></image>
  </view>
  <view class="phonogram_disc" :class="isPlay? 'running' : 'paused'">
    <view class="phonogram_disc_bg">
      <image :src="picUrl" mode="widthFix"></image>
    </view>
  </view>
</template>

<script setup>
  defineProps(['isPlay','picUrl'])
</script>

<style lang="scss" scoped>
  .phonogram_hand{
    position: absolute;
    transform-origin: 35rpx 0; 
    left: 50%;
    top: 10%;
    z-index: 1;
    transition: all 1s;
    .ball{
      position: absolute;
      width: 60rpx;
      height: 60rpx;
      left: 0;
      top: 0;
      transform: translate(0,-50%);
      z-index: 2;
      border: 10rpx solid rgba(0, 0, 0, 0.1);
      background-color: #fff;
      border-radius: 360rpx;
    }
    image{
      height: 400rpx;
      width: 200rpx;
    }
  }
  .phonogram_disc{
    height: 600rpx;
    width: 600rpx;
    border-radius: 360px;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.1);
    .phonogram_disc_bg{
      height: 100%;
      width: 100%;
      border-radius: 360px;
      background-color: #131313;
      padding: 100rpx;
      box-sizing: border-box;
      image{
        width: 100%;
        height: 100%;
        border-radius: 360px;
      }
    }
  }
  .dial{
    transform: rotate(-45deg);
  }
  .paused {
    animation: rotate 3s infinite linear;
    animation-play-state: paused;
  }
  
  .running {
    animation: rotate 3s infinite linear;
    animation-play-state: running;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  }
</style>